<!--  -->
<template>
    <div class=''>
        <cusTable border :loading="loading" :columns="columns" :data="data" :size="vuex_config.tableSize"  
        :bottomClass="['cus-page']">
            <template slot-scope="{ row }" slot="colorCodeOperation">
                <div style="display:flex;justify-content:center;align-items:center;">
                    <div style="height:25px;width:25px;border-radius:50%;" :style="{ background: `${row.colorCode}` }"></div>
                </div>
            </template>
            <template slot-scope="{ row }" slot="operation">
                <div class="flex">
                    <Button :type="row.status == 'ENABLE' ? 'error' : 'primary'" size="small" v-permission="50"
                        style="margin-right: 6px" @click="updateApiProductcategorySwitchStatusApi(row)">
    
                        {{ row.status == 'ENABLE' ? '禁用' : '启用' }}
                    </Button>
                    <Button type="primary" size="small" v-permission="30" style="padding: 0 8px; margin-right: 6px;" @click="onEdit(row)">
                        编辑
                    </Button>
                    <Button type="error" size="small" v-permission="40" v-if="row.isSystem == 0" @click="onDelete(row)">
                        删除
                    </Button>
                </div>
            </template>
        </cusTable>
        <div class="cus_page">
            <cus-page :data="pages" class="mt_20" @pageChange="getApiProductcategoryListApi()"></cus-page>
        </div>
        <!--添加商品类别-->
        <addProductCategory ref="addProductCategory"></addProductCategory>
    </div>
</template>

<script>
import {
    getApiProductcategoryList,
    updateApiProductcategorySwitchStatus,
    deleteApiProductcategory
} from "@/api/organ/dishesModule.js";
import addProductCategory from "./addProductCategory.vue";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: { addProductCategory },
    props: {
      form: {
        type: Object,
        default: () => {}
      }
    }, 
    data() {
        //这里存放数据
        return {
            data: [],
            tableHeight: 0,
            loading: false,
            columns: [
                {
                    title: "序号",
                    width: 70,
                    type: "index",
                    align: "center",
                },
                {
                    title: "分类名称",
                    key: "categoryName",
                    align: "center",
                    minWidth: 125,
                },
                {
                    title: "创建时间",
                    key: "gmtCreate",
                    align: "center",
                    minWidth: 135,
                },
                {
                    title: "是否系统模式",
                    key: "isSystem",
                    align: "center",
                    minWidth: 135,
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "span",
                                {},
                                params.row.isSystem == 1 ? '是(系统模式不可删除)' : '否'
                            ),
                        ]);
                    },
                },
                {
                    title: "颜色",
                    slot: "colorCodeOperation",
                    align: "center",
                    minWidth: 125,
                },
                {
                    title: "操作",
                    width: 245,
                    fixed: "right",
                    slot: "operation",
                    align: "center",
                },
            ],
            pages: {
                page: 1,
                pageSize: 10,
                pageTotal: 0,
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        window.addEventListener("resize", this.getTableHeight);
    this.getTableHeight();
        this.onInit()
    },
    //方法集合
    methods: {
        onInit() {
            this.getApiProductcategoryListApi()
        },
            //设置Table表头高度自适应
    getTableHeight() {
      this.tableHeight = window.innerHeight - 272;
    },
        // 编辑
        onEdit(row) {
            this.$refs['addProductCategory'].form = this.$cu.deepClone(row);
            this.$refs['addProductCategory'].show();
        },
        onAdd() {
            this.$refs['addProductCategory'].show();
        },
        // 删除
        onDelete(row) {
            this.$cu.dialog({
                    params: row,
                })
                .then(({ id }) => {
                    console.log(1);
                    this.deleteApiProductcategoryApi(id);
                });
        },
  
        // 商品种类列表---------------------接口
        getApiProductcategoryListApi() {
          this.loading = true
            return new Promise((resolve) => {
                let params = {
                    currentPage: this.pages.page,
                    pageSize: this.pages.pageSize,
                }
                getApiProductcategoryList(params).then((res) => {
                    if (res.code == 1) {
                        this.loading = false;
                        this.data = res.data.list;
                        this.pages.pageTotal = res.data.total;
                        resolve();
                    }
                });
            });
        },
        // 更改状态---------------------接口
        updateApiProductcategorySwitchStatusApi(row) {
            this.loading = true;
            return new Promise((resolve) => {
                updateApiProductcategorySwitchStatus({ id: row.id }).then((res) => {
                    this.loading = false;
                    if (res.code == 1) {
                        this.onInit();
                        this.$Message.success(row.status == 'ENABLE' ? '禁用商品种类成功' : '启用商品种类成功');
                        resolve();
                    }
                });
            });
        },
        // 删除数据----------------------------接口
        deleteApiProductcategoryApi(id) {
            this.loading = true;
            console.log(1111);
            return new Promise((resolve) => {

                deleteApiProductcategory({ id: id }).then((res) => {
                    this.loading = false;
                    if (res.code == 1) {
                        this.onInit();
                        this.$Message.success('删除商品种类成功');
                        resolve();
                    }
                });
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },

}

</script>
<style scoped>

</style>